<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">

  <meta name="ver:2.2.4">
  <!-- V2.2.4 2021-10-10 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script> <!-- jqurey库-->
  <link rel="stylesheet" type="text/css" href="css/index.css?ver=2.2.3">
  <script src="js/pub.js?ver=2.2.3"></script>
  <script src="js/admin.js"></script>
  <style>
    #switch {
      display: flex;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .selector2 {
      width: fit-content;
      margin-left: 15px;
      margin-right: 15px;
      /* padding-left: 10px;
    padding-right: 10px; */
      font-size: 26px;
      cursor: pointer;
    }

    /* 选择标签 */

    .selectorActive {
      color: blue;
      border-bottom: 2px solid blue;
    }

    .selectorInactive {
      color: gray;
      border-bottom: 2px solid gray;
    }

    #detailInput {
      height: 200px;
      width: 90%;
      max-width: 500px;
      text-align: left;
      padding: 12px;
      white-space: pre-line;
      border-radius: 12px;
    }
    /* 滑块条 */
    #detailInput::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: #e0e0e0;
      border-radius: 8px;
    }

    #detailInput::-webkit-scrollbar-track {
      border-radius: 8px;
      
    }

    #detailInput::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #c1c1c1;
    }

    #detailInput::-webkit-scrollbar-button {
      height: 0px;
      width: 0px;      
    }

    #viewBox {
      width: 100%;
      height: calc(100vh - 100px);
      margin-bottom: 0;
      border: 1px solid white;
      border-radius: 15px;
    }


    #box3 {
      display: none;
    }

    .textBox {
      /* very advanced typography */
      line-height: 1em;
      font-family: arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      /* mess with how it looks! very excite */
      /*border: 2px solid transparent;*/
      /* margin: 4px 2px 4px 2px; */
      padding: 6px 14px;
      /* boring */
      box-sizing: border-box;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      width: auto;
      white-space: nowrap;
      /* alternate looks */
      /* animation stuff */
      border-width: 1px;
      border-radius: 24px;
      border-color: transparent;
      outline: none;
      background-color: white;
    }
  </style>
  <title>徐导yyds</title>
</head>

<body>

  <div id="switch">
    <div class="selector2" id="selectorS0" onclick="switchBox(0)">新增</div>
    <div class="selector2" id="selectorS1" onclick="switchBox(1)">删除</div>
    <div class="selector2" id="selectorS2" onclick="switchBox(2)">查询</div>
  </div>


  <div id="box0">
    <!-- <h1>新增</h1> -->
    <form action="/php/input.php" method="post">
      <!-- <p>班级</p> -->
      <select name="classes" class="btn">
        <option value="dddd" selected>大班</option>
        <option value="304">304</option>
        <option value="305">305</option>
        <option value="306">306</option>
        <option value="307">307</option>
        <option value="308">308</option>
        <option value="309">309</option>
      </select>
      <!-- <p>密码</p> -->
      <br>
      <br>
      <input type="text" name="key" class="textBox" placeholder="密码">

      <!-- <p>标题</p> -->
      <br>
      <br>
      <input type="text" name="title" class="textBox" placeholder="标题">

      <br>
      <br>
      <p>详情</p>
      <textarea name="detail" id="detailInput" class="textBox"></textarea>

      <p>ddl 时间</p>
      <input type="datetime-local" name="ddl_datetime" class="textBox">


      <p>*小班不填这一项* 类型 0为ddl 1为非必需完成的活动</p>
      <input type="text" name="class_" value="0" class="textBox">
      <br>
      <br>
      <input type="submit" value="新增" class="btn light">
    </form>
  </div>

  <div id="box1">
    <!-- <h1>删除</h1> -->
    <form action="/php/delete.php" method="post">
      <!-- <p>班级</p> -->
      <select name="classes" class="btn">
        <option value="dddd" selected>大班</option>
        <option value="304">304</option>
        <option value="305">305</option>
        <option value="306">306</option>
        <option value="307">307</option>
        <option value="308">308</option>
        <option value="309">309</option>
      </select>
      <!-- <p>密码</p> -->
      <br>
      <br>
      <input type="text" name="key" class="textBox" placeholder="密码">

      <!-- <p>要删除的条目序号</p> -->
      <br>
      <br>
      <input type="text" name="index_" class="textBox" placeholder="要删除的条目序号">

      <br>
      <br>
      <input type="submit" value="删除" class="btn light">
    </form>
  </div>
  <div id="box2">
    <iframe src="/" id="viewBox"></iframe>
  </div>
  <div id="box3">
    <h1>查询序号</h1>
    <select onchange="update()" class="selector">
      <option value="dddd">大班</option>
      <option value="304">304</option>
      <option value="305">305</option>
      <option value="306">306</option>
      <option value="307">307</option>
      <option value="308">308</option>
      <option value="309">309</option>
    </select>

    <button type="button" onclick="update()" class="btn light">刷新</button>
    <div id="statusLabel"></div>
    <!--显示刷新状态-->
    <table style="margin: 0 auto">
      <thead>
        <tr>
          <th class="time">DDL</th>
          <th class="summary">摘要</th>
          <th class="detail">详情</th>
          <th class="time">发布时间</th>
          <th class="state">状态</th>
          <th class="id">序号</th>
        </tr>
      </thead>

      <tbody id="list"></tbody>
    </table>
  </div>
</body>

</html>